<template>
  <div class="swiper-con">
    <div class="one" v-if="res.swiperInfo">
      <van-sticky>
        <div class="swiper-header">
          <div class="iconFuhao">
            <van-icon name="arrow-left" @click="router.go(-1)" />
          </div>
          <p v-if="curId != '85'">{{ res.swiperInfo.activityName }}</p>
          <p>{{ res.swiperInfo.title }}</p>
        </div>
      </van-sticky>
      <div class="s-img" v-if="curId != '85'">
        <img :src="res.swiperInfo.coverUrl" alt="" />
      </div>
      <div class="s-img" v-else>
        <img :src="res.swiperInfo.cover" alt="" />
      </div>

      <div class="swiper-details">
        <div class="s-contents">
          <div class="s-title">
            <p>教练日课</p>
            <h3>{{ res.swiperInfo.activityName }}</h3>
          </div>
          <div class="s-text">
            <p>{{ res.swiperInfo.activitySubName }}</p>
            <p>{{ res.swiperInfo.vice }}</p>
          </div>
          <div class="s-price">
            <h4 v-if="curId != '85'">
              {{ String(res.swiperInfo.originalPrice).slice(0, 3) }}元
            </h4>
            <h4 v-else>{{ String(res.swiperInfo.price).slice(0, 5) }}</h4>
            <p v-if="curId != '85'">开课中</p>
          </div>

          <p class="del" v-if="curId == '85'">
            原学费:{{ res.swiperInfo.originalPrice }}
          </p>
        </div>
        <div class="navs">
          <div
            class="navs-con"
            v-for="item in res.swiperInfo.labels"
            :key="item.id"
          >
            {{ item.label }}
          </div>
        </div>

        <div class="s-course" v-if="curId != 85">课程介绍</div>
        <div class="s-course" v-else>
          <div class="tit">
            <div class="tit-left">
              <h3>包含课程</h3>
              <p>(入门,从一阶到四阶)</p>
            </div>
            <div class="tit-right">
              <img
                src="	https://static.xuantong.cn/activity/bmyx/detail/exh_class_slide_im.png"
                alt=""
              />
            </div>
          </div>
          <div class="big-con">
            <div class="wrap-c">
              <div
                class="list-top"
                v-for="item in res.swiperInfo.course"
                :key="item.id"
              >
                <div class="list-top-con">
                  <div class="img-l"><img :src="item.cover" alt="" /></div>
                  <div class="text-r">
                    <div class="tit-t">
                      <p>书法</p>
                      <h3>{{ item.title }}</h3>
                    </div>
                    <p>共{{ item.count }}课</p>
                    <div class="price-b">
                      <h4>{{ item.price }}</h4>
                      <p>开课中</p>
                    </div>
                  </div>
                </div>
                <div class="ccc">
                  <img :src="item.message" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="time-info">
            <img
              src="https://static.xuantong.cn/course/detail/all_exh_course_time_im.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <!-- 第三个轮播文房装备 -->
      <div class="study-room">
        <div class="study-title">
          <h4>文房装备</h4>
          <p>暄桐文房小程序或淘宝店</p>
        </div>
        <div class="study-pic">
          <div
            class="pics-con"
            v-for="item in res.swiperInfo.wf"
            :key="item.id"
          >
            <img :src="item.cover" alt="" />
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
      <!-- 第三个轮播底部图片展示...... -->
      <!-- <div class="course-introduce-box">
        <div class="c-box" v-for="pic in res.swiperInfo.detail[0].images[0]" :key="pic.id">
          <img :src="pic.url" alt="">
        </div>
      </div> -->

      <!-- 前两个轮播详情页 curId != 85 -->
      <div class="swiper-pic" v-if="curId != '85'">
        <div
          class="s-pic"
          v-for="item in res.swiperInfo.pictures"
          :key="item.id"
        >
          <img :src="item.originalUrl" alt="" />
        </div>
      </div>

      <!-- 底部 -->
      <div class="s-bottom">
        <div class="kefu">
          <van-icon name="contact" />
          <p>客服</p>
        </div>
        <div class="give">
          <van-icon name="gift-o" />
          <p>赠课给Ta人</p>
        </div>
        <div class="sname">报名结束</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
const { $axios } = getCurrentInstance().appContext.config.globalProperties;

const router = useRouter();
const route = useRoute();
let curId = route.query.id;
let res = reactive({
  swiperInfo: {},
});
let url = "";
if (curId != 85) {
  url = `/apixt/activity/api/activity/${curId}?id=${curId}`;
} else {
  url = `/xuantong/mocks/detail.json?t=1663046654748`;
}
const data = await $axios(url);
res.swiperInfo = data.data;
console.log(res.swiperInfo);

// $axios(`/apixt/activity/api/activity/${curId}?id=${curId}`).then((data) => {
//   res.swiperInfo = data.data;
//   console.log(res.swiperInfo);
// });
</script>

<style lang="less">
.swiper-con {
  height: calc(100vh - 57px);
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .one {
    .swiper-header {
      height: 46px;
      display: flex;
      padding: 0 20px;
      align-items: center;
      background-color: #eee;
      p {
        width: 63%;
        margin-left: 40px;
        font-weight: normal;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .s-img {
      img {
        width: 100vw;
        height: 212px;
      }
    }
    .swiper-details {
      .s-contents {
        padding: 0 20px;
        .s-title {
          display: flex;
          align-items: center;
          margin-top: 10px;
          p {
            width: 58px;
            height: 22px;
            font-size: 12px;
            text-align: center;
            line-height: 22px;
            color: #fff;
            background: #c4a57f;
            border-radius: 5px;
          }
          h3 {
            font-weight: normal;
            font-size: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .s-text {
          margin-top: 15px;
          p {
            color: #666;
            font-size: 12px;
          }
        }
        .s-price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 15px;
          h4 {
            color: #097276;
            font-size: 20px;
          }
          p {
            color: #ad8153;
            font-size: 12px;
          }
        }
      }
      .del {
        color: #333;
        font-size: 12px;
        margin-top: 10px;
        text-decoration: line-through;
      }
      .navs {
        padding: 20px;
        box-sizing: border-box;
        width: 100vw;
        overflow-x: scroll;
        display: flex;
        flex-wrap: nowrap;
        &::-webkit-scrollbar {
          display: none;
        }
        .navs-con {
          flex-shrink: 0;
          width: 173px;
          height: 44px;
          line-height: 44px;
          text-align: center;
          color: #ad9174;
          background: rgba(173, 145, 116, 0.1);
          border-radius: 5px;
          font-size: 14px;
          &:nth-child(2) {
            margin-left: 10px;
          }
          &:nth-child(3) {
            margin-left: 10px;
          }
        }
      }
      .s-course {
        padding: 0 20px;
        box-sizing: border-box;
        background: linear-gradient(180deg, #ede5dd, #f4f0ec);
        width: 100%;
        overflow: hidden;
        .tit {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .tit-left {
            display: flex;
            align-items: baseline;
            padding: 20px 0;
            p {
              font-size: 12px;
              font-weight: 600;
              margin-left: 5px;
            }
          }
          .tit-right {
            img {
              width: 60px;
              height: 12px;
            }
          }
        }
        .big-con {
          width: calc(100vw - 40px);
          overflow-x: scroll;
          .wrap-c {
            display: flex;
            .list-top {
              .list-top-con {
                flex-shrink: 0;
                width: 85%;
                margin: 0 auto;
                display: flex;
                padding: 20px;
                background-color: #fff;
                margin-right: 10px;
                .img-l {
                  img {
                    width: 80px;
                    height: 80px;
                    border-radius: 15px;
                  }
                }
                .text-r {
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  width: 73%;
                  margin-left: 20px;
                  padding: 5px 0;
                  .tit-t {
                    display: flex;
                    p {
                      background: #ad9174;
                      color: #fff;
                      font-size: 10px;
                      border-radius: 5px;
                      padding: 2px;
                    }
                    h3 {
                      color: #1d2445;
                      font-size: 14px;
                      margin-left: 5px;
                    }
                  }
                  p {
                    color: #b0b0b0;
                  }
                  .price-b {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    h4 {
                      color: #181c25;
                    }
                    p {
                      background: #e0bf95;
                      color: #fff;
                      padding: 3px;
                      font-size: 10px;
                      border-radius: 5px;
                    }
                  }
                }
              }
            }
            .ccc {
              margin-top: 20px;
              img {
                width: 325px;
                height: 400px;
                margin-right: 10px;
              }
            }
          }
        }
        .time-info {
          img {
            width: 325px;
            height: 315px;
          }
        }
      }
    }
    .study-room {
      padding: 20px 20px 20px;
      .study-title {
        h4 {
          font-size: 16px;
        }
      }
      .study-pic {
        width: calc(100vw - 40px);
        overflow-x: scroll;
        display: flex;
        &::-webkit-scrollbar {
          display: block;
        }
        .pics-con {
          margin-right: 10px;
          img {
            width: 275px;
            height: 155px;
            display: block;
          }
          p {
            width: 275px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            border: 1px solid red;
          }
        }
      }
    }

    .swiper-pic {
      .s-pic {
        img {
          width: 100vw;
        }
      }
    }
    .s-bottom {
      height: 55px;
      background-color: #c4a57f;
      display: flex;
      justify-content: space-between;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      .kefu {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .give {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .sname {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
